<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
	<meta charset="utf-8">
	<link href="../style/main_table.css"  th:href ="@{/assets/style/main_table.css}" type=text/css rel=stylesheet>
     <script src="../js/vue.min.js" th:src ="@{assets/js/vue.min.js}"></script>
	 <script src="../js/axios.js" th:src = "@{assets/js/axios.js}"></script>
    </head>
  
<body>
	   <!--要有这个挂载点-->
        <div id="app2">

        <table width="100%"  border="0"   align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="6"><img src="../images/main_01.gif" th:src="@{/assets/images/main_01.gif}" width="6" height="6"/></td>
          <td width="981" bgcolor="#A3A3A3"><img src="../images/main_02.gif" th:src="@{/assets/images/main_02.gif}" width="560" height="6"></td>
          <td width="10"><img src="../images/main_03.gif" th:src="@{/assets/images/main_03.gif}" width="6" height="6"/></td>
       </tr>
        <tr bgcolor="#F0F0F0">
          <td colspan="3" background="../images/bg.gif" th:background="@{assets/images/bg.gif}" bgcolor="#F0F0F0" class="TABLE">
		  <table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1" >
              <tr>
                <td background="../images/main_title_bg1.gif" th:background="@{assets/images/main_title_bg1.gif}">
				<table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="1%"><img src="../images/dot9.gif" th:src="@{assets/images/dot9.gif}" width="14" height="14"/></td>
                    <td width="99%">合同信息输入springboot+mybatis </td>
                  </tr>
                </table>
				</td>
              </tr>
              <tr><td>
   
   


             <table border=0 width=100%>
                <tr><td>合同号:
                <input type=text  size=15 v-model="hetong_id"/></td>
                <td> 房屋：
				<select  v-model="house_id"> 
				   <option value="">---请选择---</option>
                	<option v-for="option in houselist" v-bind:value="option.id">
                	  {{option.name}}
                	</option>	
                </select>
                </td>
                <td> 业主电话：
                <input type=text  size=15 v-model="owner_phone"/>
                <input type=button value="查询"   v-on:click="getdataList">&nbsp;
                <input type=reset  value="清空"   v-on:click="resetfun">
                <input type=button value="增加"   onclick="window.location='/test/hetongmanage/add'">
                <input type=button value="批量删除"  @click="delALLData">
               </table>              
                </td></tr>
     
              <tr>
                <td height="20" class="TABLE5"><strong></strong></td>
              </tr>
              <tr><td width="100%" class="TABLE5">
                <table class="table1" border=0  width="100%">
                  <tr align="center">
                    <td  nowrap width="5%" height="20" class="TD_title1">
					<input type="checkbox" @click="selectAll" v-model='checkedALL'/>全选 
					</td>
                    <!-- <td  nowrap width="10%" height="20" class="TD_title1"><strong>id</strong></td> -->
                    <td  nowrap width="10%" class="TD_title1"><strong>合同号</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>合同名称</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>楼区</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>单元</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>房屋</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>面积(M2)</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>业主姓名</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>业主电话</strong></td>
                    <td  nowrap width="20%" class="TD_title1"><strong>操作</strong></td>
                  </tr>
                  
                 
                 
                 <!--加入数据开始:tr中不能再嵌套tr:否则报vue中items没有定义--> 
                 <tr v-for="items  in datalist"  class='MenuItem'>   
	                  <td align="center" nowrap>
	                 <!--将每一个checkbox控件绑定到一个数组：选中的话，则其值就会自动存入到数组中-->
	                  <input type="checkbox"  v-model="checkList" :value="items.id"/></td>
	                  <td  align="center"  class="TD2" nowrap>{{items.hetong_id}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.name}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.locationname}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.unitname}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.housename}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.area}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.owner_name}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.owner_phone}}</td>
	                  <td  align="center"  class="TD2" nowrap>
	  
					  <input type="button" value="删除" @click="del(items.id)"/>
					  <input type="button" value="修改" @click="modify(items)" />
	                  </td>
	                </tr>

                 <tr align="center">
                        <td  align="center" width="10%" nowrap>
                        <input type="text"  v-model="rowtemplate.id" readonly/></td> 
                        <!-- <td  nowrap width="10%" height="20" class="TD_title1"><strong>id</strong></td> -->
                        <td  nowrap width="10%" class="TD_title1">{{rowtemplate.hetong_id}}</td>
                        <td  nowrap width="10%" class="TD_title1">{{rowtemplate.name}}</td>
                        <td  nowrap width="10%" class="TD_title1">
                            <select v-model="rowtemplate.house_id">
                                <option value="">{{rowtemplate.house_id}}</option> 
                                  <option v-for="option in houselist" v-bind:value="option.id">
                                   {{option.name}}
                                  </option>			
                            </select>
                        </td>
                        <td  nowrap width="10%" class="TD_title1">
                            <select v-model="rowtemplate.unit_id">
                            <option value="">{{rowtemplate.unit_id}}</option> 
                              <option v-for="option in unitlist" v-bind:value="option.id">
                               {{option.name}}
                            </option>			
                        </select></td>
                        <td  nowrap width="10%" class="TD_title1">
                            <select v-model="rowtemplate.location_id">
                                <option value="">{{rowtemplate.location_id}}</option> 
                                  <option v-for="option in locationlist" v-bind:value="option.id">
                                   {{option.name}}
                                  </option>			
                            </select></td>
                        <td  nowrap width="10%" class="TD_title1">{{rowtemplate.area}}</td>
                        <td  nowrap width="10%" class="TD_title1">{{rowtemplate.owner_name}}</td>
                        <td  nowrap width="10%" class="TD_title1">{{rowtemplate.owner_phone}}</td>
                        <td  nowrap width="10%" class="TD_title1"><button type="button"  v-on:click="save">{{buttonname}}</button></td>
                        <td  nowrap width="10%" class="TD_title1"><div v-model="returnmsg"><font color=red>{{returnmsg}}</font></div></td>
                 </tr>
				 
                </table></td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td><img src="../images/main_05.gif" th:src="@{/assets/images/main_05.gif}" width="6" height="6"/></td>
          <td bgcolor="#A3A3A3"><img src="../images/main_06.gif" th:src="@{/assets/images/main_06.gif}" width="560" height="6"/></td>
          <td><img src="../images/main_07.gif" th:src="@{/assets/images/main_07.gif}" width="6" height="6"/></td>
        </tr>
		<!--获取后台操作的信息-->
		<tr>
		<td colspan=9 v-model="returnmsg"><font color=red>{{returnmsg}}</font></td>
      </table>
	  
	  <input type=hidden  id="id88" value="55"  v-model="id"> 
	  
</div>

</body>
</html>



<script>
     var app2 =new Vue({
            el:'#app2',   //挂载点
            data:{
				id:'',
                hetong_id:'',
				house_id:'',
				owner_phone:'',
                houselist:[],
                unitlist:[],
                locationlist:[],
				datalist:[],
                checkedALL:false,//全选框
                checkList:[], //全选反选
                buttonname: "保存修改数据",
				returnmsg:'', //增加删除修改的返回信息
				rowtemplate: { id: '', name: '',hetong_id:'',house_id:'',unit_id:'',location_id:'',owner_phone:'',owner_name:''}, 
			},
            //钩子方法：创建页面时就调用获取数据显示
            created: function (){
			    this.gethouseList(); //获取区域数据，下拉框中去显示
                this.getdataList(); //获取合同表数据，主页面显示
                this.getunitList();
                this.getlocationList();
            },



            methods: {
				//发get请求获取区域数据，下拉框中去显示
				gethouseList:function () {
				  axios.get('http://localhost:8087/test/HouseControl/queryHouse').
					then(function (response){
				        var arr=response.data; //获取后台json数据
				        app2.houselist=arr; //将json数据赋给vue中变量quyulist
				    }).catch(function (error) {
				          alert(error);
				    })
				},
                getunitList:function () {
                    axios.get('http://localhost:8087/test/UnitControl/queryUnit').
                      then(function (response){
                          var arr=response.data; //获取后台json数据
                          app2.unitlist=arr; //将json数据赋给vue中变量quyulist
                      }).catch(function (error) {
                            alert(error);
                      })
                  },
                  getlocationList:function () {
                    axios.get('http://localhost:8087/test/LocationControl/queryLocation').
                      then(function (response){
                          var arr=response.data; //获取后台json数据
                          app2.locationlist=arr; //将json数据赋给vue中变量quyulist
                      }).catch(function (error) {
                            alert(error);
                      })
                  },
                  
                //发get请求获取合同表数据，主页面显示
                getdataList:function () {
                  axios.get('http://localhost:8087/test/HetongControl/queryHetong',{params:{hetong_id:this.hetong_id,house_id:this.house_id,owner_phone:this.owner_phone}}).
					then(function (response){
                        var arr=response.data; //获取后台json数据
                        app2.datalist=arr; //将json数据赋给vue中变量datalist
						//alert(app2.datalist[0].id);
						//alert(app2.datalist[0].jzmc);
						//alert(app2.datalist[0].hetong);
                    }).catch(function (error) {
                          alert(error);
                    })
                },
				
				//发get请求删除数据
                del:function (e) {
                    axios.get('http://localhost:8087/test/HetongControl/deleteHetong?id='+e)
                        .then(function (response) {
                            app2.getdataList();
							//异步请求中：访问data中的数据不能用this.使用vue对象如：app1
							app2.returnmsg=response.data.msg; //将json返回的消息付给变量去显示
                        }).catch(function (error) {
 
                    })
                },
				
                save: function () {
				    //发送异步请求修改数据
					axios({
					    method: 'POST',
					    url: '/test/HetongControl/updateHetong',
					    params: { //多个字段数据：依次写在下面
						    'id': this.rowtemplate.id,
					        'name':this.rowtemplate.name,
                            'hetong_id':this.rowtemplate.hetong_id,
                            'house_id':this.rowtemplate.house_id,
                            'unit_id':this.rowtemplate.unit_id,
                            'location_id':this.rowtemplate.location_id,
                            'owner_phone':this.rowtemplate.owner_phone,
                            'owner_name':this.rowtemplate.owner_name,
					       		},
					    headers: {
					      'Content-Type': 'application/x-www-form-urlencoded'
					    }
					} ).then(function (response) {
						    
							//异步请求中：访问data中的数据不能用this.使用vue对象如：app1
							app1.returnmsg=response.data.msg; //将json返回的消息付给变量去显示
						}).catch(function (error) {
		
						})
						
						//还原模板的值为空
						this.rowtemplate = { id: '', name: '',hetong_id:'',house_id:'',unit_id:'',location_id:'',owner_phone:'',owner_name:''};
				},
				
				/* modify:function(id){
				  this.id=id; //将修改数据的id赋给vue变量id:因为绑定了隐藏控件。给下个页面获取值 
				  window.location.href="update.html?id="+id;
				}, */
				
				
				//对应清空按钮：清除查询条件
				resetfun:function(){
					this.hetong_id='';
					this.owner_phone='';
					this.house_id='';
					app2.getdataList(); //重新请求数据
				},
				 //选中删除
				delALLData:function(){
						axios.get('http://localhost:8087/test/HetongControl/deletebach?mycheckbox='+this.checkList)
							.then(function (response) {
								app2.getdataList(); //重新请求数据
								//异步请求中：访问data中的数据不能用this.使用vue对象如：app1
								app2.returnmsg=response.data.msg; //将json返回的消息付给变量去显示
							}).catch(function (error) {
 
						})
				},
				
				 //修改回显
                 modify:function (items) {
					//回显将传来的记录放到模板数据里面：模板数据绑定下面的修改输入框去显示
					this.rowtemplate = items;
				},

				//全选
				selectAll(event){
				  if (!event.currentTarget.checked) {
				   this.checkList = [];
				  } else { //实现全选
				   this.checkList = [];
				   this.datalist.forEach((item, i) =>{
					   //将所有的checkbox绑定的值，填回去，则该checkbox选中
					this.checkList.push(item.id);
				   });
				  }
				 }
			  }
		});

		</script>